<script lang="ts" setup>
import { reactive, ref, watch, toRaw } from 'vue';
import { type FormInstance, ElMessageBox } from 'element-plus';
import type { DictItemFormFields } from '@/views/system/dict/type';
import ReDrawer from '@/components/ReDrawer';

defineOptions({
  name: 'DrawerUpdate'
});

const $props = defineProps({
  value: {
    type: Object as PropType<DictItemFormFields>,
    default: () => {},
    required: true
  }
});

const visible = defineModel('visible', { default: false });
const $emits = defineEmits(['confirm', 'update:modelValue']);
const ruleForm = ref<FormInstance | null>(null);
const state = reactive({
  rules: {
    itemName: [
      { required: true, message: '请输入字典项名称', trigger: 'blur' }
    ],
    itemCode: [{ required: true, message: '请输入字典项值', trigger: 'blur' }],
    itemNo: [{ required: true, message: '请选择排序号', trigger: 'change' }]
  },
  form: {
    dictId: '',
    itemName: '',
    itemCode: '',
    itemNo: 0,
    itemAttribute: '',
    description: ''
  } as DictItemFormFields
});

watch(visible, isShow => {
  if (isShow) initData();
});

const initData = () => {
  state.form = { ...$props.value };
};
const onSubmit = () => {
  if (!ruleForm.value) return;
  ruleForm.value.validate(valid => {
    if (!valid) {
      return false;
    }
    $emits('confirm', toRaw(state.form));
    onUpdate(false);
  });
};
const onClose = (done: Function) => {
  ElMessageBox.confirm('确认要取消吗？')
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
const onUpdate = value => {
  $emits('update:modelValue', value);
};
</script>
<template>
  <re-drawer
    v-model="visible"
    v-bind="$attrs"
    destroy-on-close
    @onConfirm="onSubmit"
    @onClose="onClose"
    @onCancel="onUpdate(false)"
  >
    <div class="p-2x">
      <el-form
        ref="ruleForm"
        :model="state.form"
        :rules="state.rules"
        label-width="100px"
      >
        <el-form-item label="所属字典" prop="dictId">
          <el-input v-model="state.form.dictId" disabled />
        </el-form-item>
        <el-form-item label="字典项名称" prop="itemName">
          <el-input
            v-model.trim="state.form.itemName"
            maxlength="50"
            show-word-limit
            clearable
            placeholder="请输入字典项名称"
          />
        </el-form-item>

        <el-form-item label="字典项值" prop="itemCode">
          <el-input
            v-model.trim="state.form.itemCode"
            clearable
            show-word-limit
            maxlength="50"
            placeholder="请输入字典项值"
          />
        </el-form-item>
        <el-form-item label="排序号" prop="index">
          <el-input-number v-model="state.form.itemNo" :min="0" :max="99" />
        </el-form-item>
        <el-form-item label="字典项属性" prop="itemAttribute">
          <el-input
            v-model.trim="state.form.itemAttribute"
            type="textarea"
            rows="4"
            maxlength="200"
            show-word-limit
            placeholder="请输入字典项属性"
          />
        </el-form-item>

        <el-form-item label="字典项描述" prop="description">
          <el-input
            v-model.trim="state.form.description"
            type="textarea"
            rows="5"
            maxlength="200"
            show-word-limit
            placeholder="请输入字典项描述"
          />
        </el-form-item>
      </el-form>
    </div>
  </re-drawer>
</template>
